<template>
  <div class="battle-scene">
    <div
      class="effect"
      :style="{ backgroundImage: $gbUrl($imgCatelog.battle.effects[0]) }"
    ></div>
    <i class="exit ewg-icon-icon_tuichu clickScale" @click.stop="end"></i>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { barriersMap } from "@/const/barriers";
import { useStore } from "@/store/index";
import { fightCalc } from "@/util/battle";
import { confirm } from "@/util/confirm";
import { SysActionTypes } from "@/store/sys/action-types";
import { SysInfo } from "@/const/sys";
import { MutationTypes as PlayerMutationTypes } from "@/store/player/mutation-types";

const store = useStore();
const BattlePanel = defineComponent({
  setup(props, ctx) {
    const isbattleEnd = ref(false);
    const end = async () => {
      // 战斗结束关闭面板
      if (isbattleEnd.value) {
        ctx.emit("close", true);
      } else {
        await confirm("战斗还未结束，勇士可不能临阵脱逃啊！", 1);
      }
    };
    const battleStart = async (monsterData: any, option?: any) => {
      if (store.state.userInfo.state) {
        store.dispatch(
          SysActionTypes.SYS_PUSH_INFO,
          new SysInfo(`当前无法继续战斗`, 1)
        );
        ctx.emit("close", true);
        return;
      }
      store.commit(PlayerMutationTypes.SET_USER_STATE, 2);
      const res = await fightCalc(monsterData);
      const cb = (res: boolean) => {
        if (res) {
          if (!option) return;
          const { type, label, value } = option;
          if (type === 1) {
            store.commit(PlayerMutationTypes.SET_TOWER_LEVEL, {
              label,
              value
            });
            store.dispatch(
              SysActionTypes.SYS_PUSH_INFO,
              new SysInfo(
                `恭喜挑战成功${label}第${value}层，然而并没有任何奖励`,
                4
              )
            );
          }
        }
      };
      if (res) {
        store.commit(PlayerMutationTypes.SET_USER_STATE, 0);
        isbattleEnd.value = true;
        store.dispatch(
          SysActionTypes.SYS_PUSH_INFO,
          new SysInfo(`战斗胜利`, 4)
        );
        cb(true);
        ctx.emit("close", true);
      } else {
        store.commit(PlayerMutationTypes.SET_USER_STATE, 1);
        isbattleEnd.value = true;
        store.dispatch(
          SysActionTypes.SYS_PUSH_INFO,
          new SysInfo(`战斗失败`, 1)
        );
        cb(false);
        ctx.emit("close", true);
      }
      return res;
    };
    const load = (id: number) => {
      // 开始战斗
      const barrierInfo = barriersMap.get(id);
      battleStart(barrierInfo?.monsters);
    };
    return {
      load,
      end,
      isbattleEnd,
      battleStart
    };
  }
});
export default BattlePanel;
export type BattlePanelRefs = InstanceType<typeof BattlePanel>;
</script>
<style lang="scss" scoped>
.battle-scene {
  width: 70%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid $--color-white;
  border-radius: $--border-radius;
  background: $--color-black-half;
  position: relative;
  .effect {
    width: 50%;
    height: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.7;
  }
  .exit {
    color: $--color-white;
    font-size: 40px;
    position: absolute;
    top: 5px;
    right: 5px;
  }
}
</style>
